<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../dist/css/heard.css">
    <link rel="stylesheet" href="../dist/css/scss.css">
    <script src="../static/libs/javascripts/jQuery.js"></script>
    <script src="../static/libs/javascripts/ajax.js"></script>
    <title>Document</title>
    <style>
         .btn {
            width: 430px;
            height: 430px;
        }
        .btn img {
            width: 100%;
            height: 100%;
        }


      .big-img {
            position: absolute;
            left: 450px;
            top: 0;
            width: 500px;
            height: 500px;
            overflow: hidden;
            display: none;
        }
        .big-img img {
            position: absolute;
            left: 0;
            top: 0;
            width: 717px;
            height: 717px;
            z-index: 99;
        }
        .focus {
            width: 300px;
            height: 300px;
            background: #FEDE4F;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }


    </style>
</head>
<body>
      
     <div class="logo">
        <div class="logo_left">附近门店</div>
        <div class="logo_cen"><img class="fl"
                src="https://gdp.alicdn.com/imgextra/i3/693060164/TB25ioRc9BjpuFjSsplXXa5MVXa_!!693060164.png"></div>
        <div class="logo_right"><input class="ipt" type="text" placeholder="大闹天宫"><span><img
                    src="../static/images/img_xiaotu/Y67VIK0)PQVBDR~2(E[@9XT.png" alt=""></span></div>
    </div> 
      <!-- //导航条 -->
       <div class="nav">
        <div class="nav_1">
            <ul class="navs">
                <a href="./index.html"><li>首页</li></a>
                <li>2021夏季热卖</li>
                <li>明星同款</li>
                <li>IP联名</li>
                <li>国民珍品</li>
                <li>2021秋季新品</li>
            </ul>
        </div>
    </div> 

    <!-- //列表详情 -->
    <div class="xiang_top">
        <div class="xiang_lef">           
            <div class="btn">
                <div class="focus"></div>
                <img src="" alt="" >
            </div>
            <div class="big-img">
                <img  src="https://img.hlamall.cn/hntbj2d031a/1619231171102.jpg" alt="">
            </div>
          <div class="min_img">
            <ul id="lunboUl">
                <li class="cur">
                    <img src="https://img.hlamall.cn/hntbj2d535a/1622787596284.jpg" style="width:55px;height:55px;" class="goodsImg">
                </li>
                <li class="cur">
                    <img src="https://img.hlamall.cn/hntbj2d535a/1622787596460.jpg" style="width:55px;height:55px;" class="goodsImg">
                </li>
                <li class="cur">
                    <img src="https://img.hlamall.cn/hntbj2d535a/1622787596616.jpg" style="width:55px;height:55px;" class="goodsImg">
                </li>
                <li class="cur">
                    <img src="https://img.hlamall.cn/hntbj2d535a/1622787596945.jpg" style="width:55px;height:55px;" class="goodsImg">
                </li>
                <li class="cur">
                    <img src="https://img.hlamall.cn/hntbj2d535a/1622787597073.jpg" style="width:55px;height:55px;" class="goodsImg">
                </li>
            </ul>
          </div>
        </div>
       <!-- 详情头部右侧 -->
        <div class="xiang_rig">
            <div class="good_time">
                <span class="goodname">HLA海澜之家防水防油防污短袖T恤2021夏新品三防科技亲肤短袖男HNTBJ2D535A</span>
                <p class="goodcode">商品编号：HNTBJ2D535A</p>
           
            </div>
            <div class="good_price">
                <span class="jia">优惠价</span>
                <span class="qian">￥</span>
                <span class="num">128.00</span>
            </div>
            <div class="chima">
                <span class="zi">尺码</span>
            </div>
            <div class="good_chicun">
                <form id="sizeForm">
                    <ul class="good_size"><li class="cur option size active" data-value="165/84A(46)">165/84A(46)</li><li class="cur option size" data-value="170/88A(48)">170/88A(48)</li><li class="cur option size" data-value="175/92A(50)">175/92A(50)</li><li class="cur option size" data-value="180/96A(52)">180/96A(52)</li><li class="cur option size" data-value="185/100A(54)">185/100A(54)</li><li class="cur option size notAllowed" data-value="190/104A(56)">190/104A(56)</li><li class="cur option size" data-value="190/108A(58)">190/108A(58)</li></ul>
                </form>
            </div>
            
            <div class="shu">
                <span>数量</span> <button class="btn">-</button><input type="text" value="1"><button>+</button>
            </div>

            <div class="good-buy">
                <button type="button" class="good-gm">立即购买</button>
                <button type="button" class="addgood">加入购物车</button>
            </div>

            <div class="ser">
                <ul class="ser-one">
                    <a href="">
                        <li>服务承诺</li>
                    </a>
                    <a href="">
                        <li>正品保证</li>
                    </a>
                    <a href="">
                        <li>急速退款</li>
                    </a>
                    <a href="">
                        <li>七天无理由退款</li>
                    </a>
                </ul>
            </div>
            
        </div>
    </div>
    
       
      
        <script src="./javascripts/fangdajing.js"></script>
        <script src="./javascripts/xiangqing.js"></script>
</body>
</html>